<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            width: 100vw;
        }
        .dou {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>

    <script>

        // const dou = document.querySelector('.dou');

        // setInterval(() => {
        //     const x = Math.random() * window.innerWidth;
        //     const y = Math.random() * window.innerHeight;
        //     dou.setAttribute('style', `top: ${y}px; left: ${x}px;`);
        // }, 1000);

        // setTimeout(() => {
        //     dou.remove();
        // }, 1000);

        class Dou {
            x = 0;
            y = 0;
            visible = true;
            dou = document.createElement('div');
            constructor () {
                this.dou.setAttribute('class', 'dou');
                document.body.appendChild(this.dou);
            }
            randomPosition () {
                this.x = Math.random() * window.innerWidth;
                this.y = Math.random() * window.innerHeight;
            }
            hide () {
                this.visible = false;
                this.render();
            }
            show () {
                this.visible = true;
                this.render();
            }
            render () {
                this.dou.setAttribute('style', `
                    top: ${this.y}px;
                    left: ${this.x}px;
                    display: ${this.visible ? 'block' : 'none'};
                `);
            }
            // static
            // to do
        }

        const d1 = new Dou();

        d1.randomPosition();
        d1.render();

        let flag = true;
        setInterval(() => {
            if (flag) {
                d1.hide();
            } else {
                d1.show();
            }
            flag = !flag;
        }, 1000);

    </script>
</body>
</html>